<template>
	<view class="essay_content">
		<view class="essay_content_top">
			<view class="top_left">
				<img class="author_headimg" :src="api + '/static/headImg/' + essay.essayAuthor + '.png'">
				<view class="author_name">
					{{essay.essayAuthor}}
				</view>
			</view>
			<view class="top_right" v-if="myessay" @click="show=true">
				<image src="../static/gengduo.png" style="width: 25px;height: 25px;"></image>
			</view>
		</view>
		<u-popup :show="show" @close="show=false">
			<view style="text-align: center;padding: 20px 0 10px 0;" @click="delete_essay">
				删除文章
			</view>
			<view style="text-align: center;padding: 10px 0 20px 0;" @click="show = false">
				取消
			</view>
		</u-popup>
		<view class="essay_content_bottom" @click="go_essay_detail">
			<view class="bottom_left">
				<view class="bottom_left_title">
					{{essay.essayTitle}}
				</view>
				<view class="bottom_left_tip">
					{{essay.essayClicks}}阅读 · {{essay_support.length}}点赞 · {{commentList.length}}评论
				</view>
			</view>
			<!-- <view class="bottom_right">
				<image style="width: 80px;height: 80px;" src="../static/new_pic.png"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	import api from '../api/config.js'
	export default {
		data() {
			return {
				commentList: [],
				essay_support: [],
				api: '',
				show: false
			}
		},
		props: {
			essay: {
				Object: Array
			},
			myessay:{
				Object: Boolean
			}
		},
		onLoad() {
			
		},
		mounted() {
			this.api = api
			uni.request({
				url: api + "/get_essay_comment/",
				method:'POST',
				data: {essayId: this.essay.essayId},
				success:res=>{
					this.commentList = res.data.data
				}
			})
			uni.request({
				url: api + "/get_support_essay/",
				method:'POST',
				data: {essayId: this.essay.essayId, supportAuthor: '为尔倾心'},
				success:res=>{
					this.essay_support = res.data.support_count
				}
			})
		},
		methods: {
			delete_essay() {
				uni.request({
					url:api + '/delete_essay/',
					method:'POST',
					data:{
						essayId: this.essay.essayId
					}
				})
			},
			go_essay_detail() {
				uni.request({
					url:api + '/add_read_essay/',
					method:'POST',
					data:{
						essayId: this.essay.essayId,
						essayClicks: this.essay.essayClicks + 1
					}
				})
				uni.navigateTo({
					url:'/pages/essay/essay?essayId=' + this.essay.essayId,
				})
			}
		}
	}
</script>

<style>
	.essay_content{
		/* width: 100%; */
		height: 130px;
		padding: 5px 15px 5px 15px;
		margin-top: 10px;
		background-color: white;
	}
	.essay_content_top{
		/* width: 100%; */
		height: 35px;
		display: flex;
		justify-content: space-between;
	}
	.top_left{
		display: flex;
		justify-content: flex-start;
		margin-top: 3px;
	}
	.author_headimg{
		border-radius: 50%;
		width: 22px;
		height: 22px;
	}
	.author_name{
		font-size: 15px;
		padding-left: 7px;
		padding-top: 1px;
	}
	.essay_content_bottom{
		/* width: 100%; */
		height: 90px;
		display: flex;
		justify-content: flex-start;
	}
	.bottom_left{
		flex: 3;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.bottom_right{
		flex: 1;
		text-align: right;
	}
	.bottom_left_title{
		font-size: 20px;
		font-weight: 700;
		padding-right: 10px;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 超出几行省略 */
		overflow: hidden;
	}
	.bottom_left_tip{
		font-size: 14px;
		color: gray;
	}
</style>